<template>
  <view>
	  
	  <!-- 商品图片轮播 -->
	  <swiper indicator-dots autoplay :interval="3000" :duration="500" circular style="height: 350rpx;width: 100%">
	    <swiper-item v-for="(img, index) in product.images" :key="index">
	      <image :src="img" style="width: 100%; height: 100%;"></image>
	    </swiper-item>
	  </swiper>
    <!-- 商品详情部分 -->
    <image :src="product.cover" mode="aspectFit" style="width: 100%; height: auto;"></image>
    
    <view class="product-info">
      <text class="font-lg">{{product.title}}</text>
      <text class="font-sm text-muted">{{product.desc}}</text>
      <view class="d-flex py-1">
        <view class="price">￥{{product.pprice}}</view>
        <view class="original-price">￥{{product.oprice}}</view>
      </view>
    </view>

    <!-- 商品描述部分 -->
    <view class="product-description">
      <text class="font-sm">商品描述:</text>
      <text>{{product.description}}</text>
    </view>

    <!-- 购买需求的方框 -->
    <view class="purchase-requirements">
      <view class="requirement-item" @click="viewReviews">
        <text>查看评价</text>
      </view>
      <view class="requirement-item" @click="chooseSpecs">
        <text>选择规格</text>
      </view>
      <view class="requirement-item" @click="contactSeller">
        <text>与商家联系</text>
      </view>
    </view>

    

    <!-- 底部按钮 -->
    <bottom-btn ></bottom-btn>
  </view>
</template>

<script>
	import bottomBtn from "@/components/detail/bottom-btn.vue"
export default {
	 components: {
	    bottomBtn
	  },
  data() {
    return {
      product: {
        title: "商品标题",
        desc: "30001人购买",
        cover: "../../static/images/cate_01.png",
        description: "这是商品的详细描述内容，可以包含很多关于商品的信息。",
        oprice: 2688,
        pprice: 1666,
        images: [
          "",
          
         
        ]
      }
    };
  },
  methods: {
    addToFavorites() {
      console.log("商品已收藏");
      // 这里是收藏的逻辑处理
    },
    addToCart() {
      console.log("商品已加入购物车");
      // 这里是加入购物车的逻辑处理
    },
    buyNow() {
      console.log("立即购买");
      // 这里是购买的逻辑处理
    },
    viewReviews() {
      uni.navigateTo({
        url: '/pages/reviews/reviews' // 跳转到评论页
      });
    },
    chooseSpecs() {
      console.log("选择规格");
      // 这里是选择规格的逻辑处理
    },
    contactSeller() {
      console.log("与商家联系");
      // 这里是与商家联系的逻辑处理
    }
  }
};
</script>

<style scoped>
/* 商品信息样式 */
.product-info {
  padding: 20rpx;
}

.product-info .font-lg {
  font-size: 32rpx;
  font-weight: bold;
}

.product-info .font-sm {
  font-size: 26rpx;
  color: #888;
}

.product-info .price {
  font-size: 30rpx;
  color: #e44;
}

.product-info .original-price {
  font-size: 24rpx;
  text-decoration: line-through;
  color: #999;
}

/* 商品描述 */
.product-description {
  padding: 20rpx;
}

.product-description .font-sm {
  font-size: 28rpx;
  color: #666;
}

/* 购买需求方框样式 */
.purchase-requirements {
  background-color: #f9f9f9;
  border-radius: 10rpx;
  margin: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.requirement-item {
  padding: 15rpx;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.requirement-item:last-child {
  border-bottom: none;
}

.requirement-item text {
  font-size: 28rpx;
  color: #444;
}

/* 商品图片轮播 */
swiper {
  margin-top: 20rpx;
}

/* 底部按钮样式 */
.bottom-buttons {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #fff;
  border-top: 1px solid #ccc;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

.button {
  flex: 1;
  padding: 15rpx;
  background-color: #e44;
  text-align: center;
  border-radius: 5rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.button text {
  font-size: 30rpx;
  font-weight: bold;
  color: #fff;
}

/* 按钮 hover 效果 */
.button:hover {
  background-color: #d33;
}
</style>
